<template>
  <div>
    <!-- <quill-editor  ref="myQuillEditor" v-model="content" :options="editorOption" 
      class="my-quill-editor" ></quill-editor> -->
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      @change="handleEditorChange"
      :optinotallow="editorOption"
    ></quill-editor>
  </div>
</template>

<script>
export default {
  props: ['contents'],
  watch: {
    contents: function (val) {
      console.log(val)
      this.content = val
    }
  },
  data() {
    return {
      content: '',
      editorOption: {
        // 占位配置
        placeholder: '请输入...',
        height: '300px',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            ['link', 'image', 'video'], // 链接、图片、视频
            [{ align: [] }], // 添加居中按钮
            [{ color: [] }] // 文字颜色按钮
          ],
          // 更改插入的图片大小
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      },
      handlers: {
        report: this.openWorkReport
      }
    }
  },
  // created() {
  //   this.content = this.value
  // },
  mounted() {
    this.content = this.value
  },
  methods: {
    handleEditorChange(eve) {
      this.$emit('update:contents', this.content)
    }
  }
}
</script>
<style lang="less">
/* 编辑器高度及背景色 */
::v-deep .ql-editor {
  min-height: 600px;
  background-color: #fff;
}
</style>
